<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('32-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('sj_xmmc')">
            <div class="justify_5" slot="label">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('sj_xmbh')">
            <div class="justify_5" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('sj_xmpp')">
            <div class="justify_5" slot="label">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('sj_xmlx')">
            <div class="justify_5" slot="label">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(2, 1, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('32-sjtxx')">设计图信息
          <el-button :disabled="dataObj.status > 1145"
            v-if="logList.length && $isPer(permission, ['projects_updDesignDrawings'])" @click="editImgFunc"
            class="edit-btn" type="primary">编辑</el-button>
        </div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="平面图文件" v-if="$fieldShowFunc('sj_pmtwj')">
            <div class="justify_5" slot="label">平面图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj">
              <div class="file-box-img" v-for="(item, index) in dataObj.project_file.plan_drawing" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
              <span v-if="!dataObj.project_file.plan_drawing.length">--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="效果图文件" v-if="$fieldShowFunc('sj_xgtwj')">
            <div class="justify_5" slot="label">效果图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj">
              <div class="file-box-img" v-for="(item, index) in dataObj.project_file.effect_drawing" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
              <span v-if="!dataObj.project_file.effect_drawing.length">--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="施工图文件" v-if="$fieldShowFunc('sj_sgtwj')">
            <div class="justify_5" slot="label">施工图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj">
              <div class="file-box-img" v-for="(item, index) in dataObj.project_file.construction_drawing" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
              <span v-if="!dataObj.project_file.construction_drawing.length">--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="其他文件" v-if="$fieldShowFunc('sj_qtwj')">
            <div class="justify_5" slot="label">其他文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj">
              <div class="file-box-img" v-for="(item, index) in dataObj.project_file.other_file" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
              <span v-if="!dataObj.project_file.other_file.length">--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(2, 1, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline">
          <template v-if="!logList.length">
            <el-empty description="无历史数据"></el-empty>
          </template>
          <el-timeline-item v-for="(item, index) in logList" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  {{ item.content }}
                </div>
                <div class="content-table">
                  <div class="flex jb fw">
                    <div class="table-item fw width-50"
                      v-if="item.form_data.plan_drawing.length && $fieldShowFunc('sj_pmtwj')">
                      <span class="table-item-title history_justify_5">平面图文件</span>
                      <div class="img-list-box flex ac fw">
                        <template v-for="(file, index) in item.form_data.plan_drawing">
                          <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top" :key="index">
                            <div class="img" @click="$fileViewHandle(file)">
                              <div class="del" v-if="file.delete">已删除</div>
                              <img class="image" :src="$fileImgFunc(file)" />
                            </div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                    <div class="table-item fw width-50"
                      v-if="item.form_data.effect_drawing.length && $fieldShowFunc('sj_xgtwj')">
                      <span class="table-item-title history_justify_5">效果图文件</span>
                      <div class="img-list-box flex ac fw">
                        <template v-for="(file, index) in item.form_data.effect_drawing">
                          <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top" :key="index">
                            <div class="img" @click="$fileViewHandle(file)">
                              <div class="del" v-if="file.delete">已删除</div>
                              <img class="image" :src="$fileImgFunc(file)" />
                            </div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                    <div class="table-item fw width-50"
                      v-if="item.form_data.construction_drawing.length && $fieldShowFunc('sj_sgtwj')">
                      <span class="table-item-title history_justify_5">施工图文件</span>
                      <div class="img-list-box flex ac fw">
                        <template v-for="(file, index) in item.form_data.construction_drawing">
                          <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top" :key="index">
                            <div class="img" @click="$fileViewHandle(file)">
                              <div class="del" v-if="file.delete">已删除</div>
                              <img class="image" :src="$fileImgFunc(file)" />
                            </div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                    <div class="table-item fw width-50"
                      v-if="item.form_data.other_file.length && $fieldShowFunc('sj_qtwj')">
                      <span class="table-item-title history_justify_5">其他文件</span>
                      <div class="img-list-box flex ac fw">
                        <template v-for="(file, index) in item.form_data.other_file">
                          <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top" :key="index">
                            <div class="img" @click="$fileViewHandle(file)">
                              <div class="del" v-if="file.delete">已删除</div>
                              <img class="image" :src="$fileImgFunc(file)" />
                            </div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                    <div class="table-item" v-if="item.form_data.remark && $fieldShowFunc('sj_bz')">
                      <span class="table-item-title history_justify_5">备注</span>
                      <span class="table-item-content">{{ item.form_data.remark || '--' }}</span>
                    </div>
                  </div>
                  <!-- <div class="flex jb fw" v-if="item.form_data.delete_arr && item.form_data.delete_arr.length">已删除文件
                  </div> -->
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import designApi from "@/api/designApi";
export default {
  name: 'designDetailPage',
  data() {
    return {
      logList: [],
      dataObj: '',
      permission: [],//操作权限
      hisDrawer: false,
    };
  },
  computed: {
  },
  activated() {
    this.designProjectDetails();//设计图详情
  },
  mounted() {
    // 操作权限
    this.$getHtmlAuthority('/designManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.designProjectDetails();//设计图详情
  },
  methods: {
    // 编辑
    editImgFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/scsjtCom',
        query: {
          id: this.$route.query.id,
          route_title: '修改设计图信息'
        }
      })
    },
    // 设计详情A
    designProjectDetails() {
      if (!this.$route.query.id) return;
      designApi.designProjectDetails({
        project_id: this.$route.query.id
      }).then(res => {
        console.log(res, "设计图详情")
        if (res.code == 200) {
          this.dataObj = res.data;
          res.data.log_list.forEach(item => {
            item.form_data = JSON.parse(item.form_data);
            if (item.form_data.delete_arr) {
              item.form_data.delete_arr.forEach(child => {
                if (item.form_data[child.type]) {
                  item.form_data[child.type].push(child);
                }
              })
            }
          });
          this.logList = res.data.log_list;
          console.log(this.logList, "历史记录")
        }
      })
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
@import './index.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>